<template>
    <el-form
      class="login-container"
      ref="refLogin"
      :model="loginForm"
      :label-position="labelPosition"
      :rules="rules"
      label-width="80px"
    >
      <el-form-item label="用户名：" prop="userid">
        <el-input v-model="loginForm.userid" placeholder="用户ID"></el-input>
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input type="password" v-model="loginForm.password" placeholder="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="full-width" type="primary" @click="loginHandler">登录</el-button>
      </el-form-item>
      <el-form-item>
        <el-link type>没有账号，点我注册</el-link>
      </el-form-item>
    </el-form>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        userid: "",
        password: ""
      },
      // 表单标签顶部对齐
      labelPosition: "top",
      // 表单验证规则
      rules: {
        // 规则必须与data属性对应，el-form-item的prop属性保持一致
        userid: [
          { required: true, message: "用户名不可为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不可为空", trigger: "blur" },
          { min: 2, message: "密码太短", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    loginHandler() {
      let sdata = this.$data.loginForm;
      // 提交时需要验证规则
      this.$refs["refLogin"].validate(valid => {
        // 验证通过方可提交
        if (valid) {
          this.axios
            .get(`/Security/Login?uid=${sdata.userid}&pwd=${sdata.password}`)
            .then(res => {
              // 验证通过
              if (res.data.Status) {
                // 路由跳转
                this.$router.push({ name: "Main" });
                // token 信息写入 localStorage 中
                localStorage.setItem("Token", res.data.Data.Token);
                // 用户信息写入 cookie 中
                this.$cookies.set("User", JSON.stringify(res.data.Data.User));
              } else {
                this.$message.error("用户名或密码错误");
              }
            })
            .catch(err => {
              console.error(err);
            });
        } else {
          this.$message.error("信息填写有误！");
        }
      });
    }
  }
};
</script>

<style>
/* 导入样式 */
body {
  background-image: url(/static/img/背景照.jpg);
}
.login-container {
  width: 420px;
  height: 320px;
  min-height: 320px;
  max-height: 320px;
  position: absolute;
  top: -45px;
  bottom: 0;
  right: 165px;
  margin: auto;
  padding: 20px;
  z-index: 130;
  border-radius: 8px;
  background-color: #fbfbfb;
  box-shadow: 0 3px 18px #fbfbfb;
  font-size: 16px;
}
</style>